<template>
  <div class="home">
    <div class="body">
      <div class="main">
        <el-row :gutter="20" style="width:100%">
          <!-- <el-col :span="4">
            <div class="tabs">
              <div class="tab" :class="tab==1 ? 'active' : ''" @click="tab=1">铺布</div>
              <div class="tab" :class="tab==2 ? 'active' : ''" @click="tab=2">裁剪</div>
              <div class="tab" :class="tab==3 ? 'active' : ''" @click="tab=3">入库</div>
              <div class="tab round" :class="tab==4 ? 'round-active' : ''" @click="tab=4">退库</div>
            </div>
          </el-col> -->
          <el-col :span="24">
            <div class="cont" v-if="tab==1 || tab==2 || tab==3">
              <el-row :gutter="20">
                <el-col :span="20">
                  <div class="cont-left">
                    <el-col :span="6">
                      <div class="bed-w" style="height:6.5rem">
                        <div class="tit">床次列表</div>
                        <span class="bed">当前床次：{{bed}}</span><br/>
                        <span class="bed">铺布长度：<br/><el-input type="text" placeholder="请输入铺步长度" @input="limitInput($event,$event)" v-model="clothWidth" style="width:120px"/>（米）</span>
                        <div class="button" @click="getKCNumber()">新建床次</div>
                        <el-table
                          :data="bedList"
                          :row-style="tableRowStyle"
                          :header-cell-style="tableHeaderColor"
                          highlight-current-row
                          @row-click="changeBed"
                          style="width: 100%"
                          height="2.2rem"
                        >
                          <el-table-column prop="BedID" label="床次" align="center"></el-table-column>
                        </el-table>
                      </div>
                      <div style="margin-top:5px;">
                          <div class="tabs">
                            <div class="tab" :class="tab==1 ? 'active' : ''" @click="tab=1">铺布</div>
                            <div class="tab" :class="tab==2 ? 'active' : ''" @click="tab=2">裁剪</div>
                            <div class="tab" :class="tab==3 ? 'active' : ''" @click="tab=3">入库</div>
                            <div class="tab round" :class="tab==4 ? 'round-active' : ''" @click="tab=4">退库</div>
                          </div>
                      </div>
                    </el-col>
                    <!-- <div class="number">
                      床次：
                      {{bed}}
                      <div class="button" @click="getKCNumber()">新建床次</div>
                      <el-select v-model="bed" placeholder="请选择" @change="changeBed()">
                        <el-option
                          v-for="item in bedList"
                          :key="item.CutTaskFlnkID"
                          :label="item.BedID"
                          :value="item.BedID"
                        ></el-option>
                      </el-select>
                    </div>-->
                    <el-col :span="6">
                      <div class="layer-w">
                        <div class="tit">当前层数：{{allLayers}}层</div>
                        <div class="layer">
                          <ul>
                            <li
                              :class="(selLayer == item && tab==1) ? 'active' : ''"
                              v-for="(item,index) in cuttingInfo"
                              :key="index"
                              @click="handleLayer(item)"
                            >
                              <p>缸号：{{item.CylinderNo}}</p>
                              <p>层数：{{item.FabricLayers}}</p>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </el-col>

                    <el-col :span="12">
                      <div class="style-w">
                        <div class="tit">当前款式</div>
                        <div class="style">
                          <ul>
                            <li>
                              <span>款式名称：</span>
                              {{styleInfo.StyleName}}
                            </li>
                            <li>
                              <span>客户名称：</span>
                              {{styleInfo.CustomerName}}
                            </li>
                            <li>
                              <span>订单号：</span>
                              {{styleInfo.OrderOuterCode}}
                            </li>
                            <li>
                              <span>要求数量：</span>
                              {{styleInfo.CuttingCount}}套
                            </li>
                            <li>
                              <span>已执行：</span>
                              {{styleInfo.CompletCount}}套
                            </li>
                          </ul>
                        </div>
                      </div>
                      <el-col :span="14">
                        <!-- 当前面料 -->
                        <div class="fabric-w" v-if="tab==1">
                          <div class="tit-div">
                              <span>当前面料</span>
                              <el-button type="primary" @click="goCalcTrans()">重量长度计算</el-button>
                          </div>
                          <div class="fabric">
                            <ul v-if="fabricInfo.StockCode">
                              <li>
                                <span>存货编码：</span>
                                {{fabricInfo.StockID ? fabricInfo.StockID : '--' }}
                              </li>
                              <li>
                                <span>本厂料号：</span>
                                {{fabricInfo.MaterielsDetailCode ? fabricInfo.MaterielsDetailCode : '--'}}
                              </li>
                              <li>
                                <span>门幅：</span>
                                {{fabricInfo.SpecConfigName ? fabricInfo.SpecConfigName : '--'}}
                              </li>
                              <li>
                                <span>颜色：</span>
                                {{fabricInfo.ColorConfigName ? fabricInfo.ColorConfigName : '--'}}
                              </li>
                              <li>
                                <span>克重：</span>
                                {{fabricInfo.StockInt2 ? fabricInfo.StockInt2 : '--'}}
                              </li>
                              <li>
                                <span>成分：</span>
                                {{fabricInfo.MaterielComponent ? fabricInfo.MaterielComponent : '--'}}
                              </li>
                              <li>
                                <span>入库时间：</span>
                                {{fabricInfo.StockTime == '0001-01-01 00:00:00' ? '--' : fabricInfo.StockTime }}
                              </li>
                            </ul>
                            <div class="stack">
                              <div class="button" @click="swipeCardShow = true">
                                扫二维码
                                <br />编号
                              </div>
                              <div
                                class="button"
                                :class="fabricInfo.StockStr1 ? 'default':''"
                                @click="changeCylinderNoShow"
                              >
                                <span>缸号</span>
                                <span v-if="cylinderNoShow">{{fabricInfo.StockStr1 || '请点击输入'}}</span>
                                <span v-else>
                                  <el-input
                                    v-model="fabricInfo.StockStr1"
                                    placeholder="请输入缸号"
                                    ref="cylinderNoInput"
                                    style="width:140px"
                                    @keyup.enter.native="cylinderNoEnter()"
                                  ></el-input>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="10">
                        <div class="buttons-w" v-if="tab==1">
                          <div class="tit">本隔层数量</div>
                          <el-input v-model="fabricLayers" placeholder="请输入层数" style="width:180px"></el-input>
                          <div class="button" @click="saveCuttingStepInfo()">下一隔层</div>
                          <div class="button" @click="changeCuttingNext()">铺布完成</div>
                        </div>
                      </el-col>
                      <!-- 裁床套裁信息 -->
                      <div class="arbitrage-w" v-if="tab==2">
                        <div class="tit">裁床套裁信息</div>
                        <table border="1" cellspacing="0" v-if="matchInfo.Header && matchInfo.Body">
                          <tr>
                            <th :width="100/(matchInfo.Header.length+1)+'%'">颜色\尺码</th>
                            <th
                              :width="100/(matchInfo.Header.length+1)+'%'"
                              v-for="(item,index) in matchInfo.Header"
                              :key="index"
                            >{{item.StyleSpecName}}</th>
                          </tr>
                          <tr v-for="(item,index) in matchInfo.Body" :key="index">
                            <th :width="100/(matchInfo.Header.length+1)+'%'">{{item.StyleColorName}}</th>
                            <th
                              :width="100/(matchInfo.Header.length+1)+'%'"
                              v-for="(i,k) in item.MatchCount"
                              :key="k"
                            >
                              <input
                                class="input"
                                :class="i >0 ? 'active' : ''"
                                type="text"
                                :value="i"
                                @change="changeInput(k,index)"
                              />
                            </th>
                          </tr>
                        </table>
                        <div class="button" @click="saveCuttingStepMatchInStock()">完成裁剪</div>
                      </div>
                      <!-- 入库信息 -->
                      <div class="table-w" v-if="tab==3">
                        <div class="table-top">
                          <div class="tit">入库信息</div>
                        </div>
                        <el-table
                          :data="taskList"
                          :row-style="tableRowStyle"
                          :header-cell-style="tableHeaderColor"
                          highlight-current-row
                          style="width: 100%"
                          height="260px"
                        >
                          <el-table-column label="序号" width="50">
                            <template slot-scope="scope">{{scope.$index + 1}}</template>
                          </el-table-column>
                          <el-table-column
                            prop="ColorConfigName"
                            label="颜色"
                            width="100"
                            align="center"
                          ></el-table-column>
                          <el-table-column
                            prop="SpecConfigName"
                            label="尺码"
                            width="90"
                            align="center"
                          ></el-table-column>
                          <el-table-column prop="PartName" label="部位" width="80" align="center"></el-table-column>
                          <el-table-column
                            prop="CuttingWeight"
                            label="称重（克）"
                            width="90"
                            align="center"
                          ></el-table-column>
                          <el-table-column prop="StatusName" label="状态" width="80" align="center"></el-table-column>
                          <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                              <el-button
                                type="primary"
                                v-if="scope.row.Status == 0"
                                @click="showDialog(scope.row)"
                              >入库</el-button>
                              <el-button
                                type="primary"
                                v-if="scope.row.Status == 1"
                                @click="getShopCuttingInStockDesignByStock(scope.row,1)"
                              >重新打印</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <div class="button" @click="printLeftMaterial()">打印余料标签</div>
                      </div>
                    </el-col>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="cont-right" v-if="tab==1">
                    <div class="title">铺布工</div>
                    <div class="imgs">
                      <img
                        :src="item.Photo"
                        alt
                        v-for="(item,index) in operaters"
                        :key="index"
                      />
                    </div>
                    <div class="button" @click="dialogtShow = true">铺布工请刷卡</div>
                  </div>
                  <div class="cont-right" v-if="tab==2">
                    <div class="title">裁剪工</div>
                    <div class="imgs">
                      <img
                        :src="item.Photo"
                        alt
                        v-for="(item,index) in operaters"
                        :key="index"
                      />
                    </div>
                    <div class="button" @click="dialogtShow = true">裁剪工请刷卡</div>
                  </div>
                  <div class="cont-right" v-if="tab==3">
                    <div class="title">入库人员</div>
                    <div class="imgs">
                      <img
                        :src="item.Photo"
                        alt
                        v-for="(item,index) in operaters"
                        :key="index"
                      />
                    </div>
                    <div class="button" @click="dialogtShow = true">入库人员请刷卡</div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="cont" v-if="tab==4">
              <!-- 退库信息 -->
              <div class="return-w">
                <div class="tit">退库信息</div>
                <div class="return" v-if="returnInfo.StockID">
                  <ul>
                    <li>
                      <span>存货编码：</span>
                      {{returnInfo.StockID}}
                    </li>
                    <li>
                      <span>本厂料号：</span>
                      {{returnInfo.MaterielsDetailCode}}
                    </li>
                    <li>
                      <span>门幅：</span>
                      {{returnInfo.SpecConfigName}}
                    </li>
                    <li>
                      <span>颜色：</span>
                      {{returnInfo.ColorConfigName}}
                    </li>
                    <li>
                      <span>克重：</span>
                      {{returnInfo.StockInt2}}
                    </li>
                    <li>
                      <span>成分：</span>
                      {{returnInfo.MaterielComponent}}
                    </li>
                    <li>
                      <span>入库时间：</span>
                      {{returnInfo.StockTime}}
                    </li>
                  </ul>
                  <div class="button" @click="returnStockFun()" v-if="returnInfo.StockCode">退库</div>
                </div>
                <div class="return" v-else>
                  <div class="button" @click="returnShow = true">扫退库二维码</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 刷员工卡 -->
    <div class="menuModalBox-w" v-show="dialogtShow">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="dialogtShow = false" />
        </div>
        <div class="info">{{menuModalText}}</div>
        <input
          type="text"
          ref="cardNum"
          @keyup.enter="cardNumEnter"
          v-model="cardNum"
          style="opacity: 0;z-index=-1;"
        />
      </div>
    </div>
    <!-- 扫描物料二维码 -->
    <div class="menuModalBox-w" v-show="swipeCardShow" @click="$refs.swipeCard.focus()">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="swipeCardShow = false" />
        </div>
        <div class="info">{{swipeModalText}}</div>
        <input
          type="text"
          ref="swipeCard"
          @keyup.enter="swipeCardEnter"
          v-model="swipeCard"
          style="opacity: 1;z-index=-1;"
        />
      </div>
    </div>
    <!-- 扫描退库二维码 -->
    <div class="menuModalBox-w" v-show="returnShow" @click="$refs.returnStock.focus()">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="returnShow = false" />
        </div>
        <div class="info">{{swipeModalText}}</div>
        <input
          type="text"
          ref="returnStock"
          @keyup.enter="returnEnter"
          v-model="returnStock"
          style="opacity: 0;z-index=-1;"
        />
      </div>
    </div>

    <!-- 称重弹窗 -->
    <div class="dialogBox-w" v-show="dialogShow">
      <div class="dialogBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="dialogShow = false" />
        </div>
        <div class="info-w">
          <div class="line">
            <div class="row">
              <div class="tit">颜色：</div>
              <div class="des">{{selTableInfo.ColorConfigName}}</div>
            </div>
            <div class="row">
              <div class="tit">尺码：</div>
              <div class="des">{{selTableInfo.SpecConfigName}}</div>
            </div>
            <div class="row">
              <div class="tit">部位：</div>
              <div class="des">{{selTableInfo.PartName}}</div>
            </div>
          </div>
          <div class="line">
            <div class="row">
              <div class="ftit">请称重：</div>
              <el-input
                v-model="weight"
                ref="weightInput"
                placeholder="请称重"
                style="width:140px"
                @keyup.enter.native="$refs.barCodeInput.focus()"
              ></el-input>
              <div class="unit">克</div>
            </div>
            <div class="row">
              <div class="tit">垛号：</div>
              <el-input
                v-model="barCode"
                placeholder="请输入垛号"
                ref="barCodeInput"
                style="width:140px"
                @keyup.enter.native="saveShopCuttingInStock()"
              ></el-input>
            </div>
          </div>
          <div class="send-w">
            <div class="button" @click="goValidity()">校称</div>
            <div class="button white" @click="dialogShow = false">关闭</div>
            <div class="button" @click="saveShopCuttingInStock()">确定</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 校称 -->
    <div class="menuModalBox-w" v-if="validityShow">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="validityShow = false" />
        </div>
        <Validity :p1="fabricInfo.MaterielTypeCode" :p2="fabricInfo.MSDetailFlnkID"></Validity>
      </div>
    </div>

    <!-- 重量长度计算 -->
    <div class="menuModalBox-w" v-if="calcTransShow">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="calcTransShow = false" />
        </div>
        <CalcTrans :p1="fabricInfo.CustomerFlnkID" :p2="fabricInfo.MSDetailFlnkID"></CalcTrans>
      </div>
    </div>

    <!-- 称重弹窗 -->
    <div class="dialogBox-w" v-show="dialogShowW">
      <div class="dialogBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="dialogShowW = false" />
        </div>
        <div class="info-w">
            <div class="top">
                <div class="title">物料称重明细</div> 
            </div>
            <el-table
            :data="weightMateriel"
            :row-style="tableRowStyle"
            :header-cell-style="tableHeaderColor"
            highlight-current-row
            style="width: 98.5%;font-size:26px; margin:20px 5px 10px 5px;"
            height="4.4rem"
            >
            <el-table-column prop="PartName" label="部位名称" width="100" align="center"></el-table-column>
            <el-table-column prop="CuttingName" label="裁片名称" width="120" align="center"></el-table-column>
            <el-table-column prop="ColorConfigName" label="型号" width="120" align="center"></el-table-column>
            <el-table-column prop="SpecConfigName" label="规格" width="120" align="center"></el-table-column>
            <el-table-column prop="UnitWeight" label="单重（克）" align="center">
                <template slot-scope="scope">{{scope.row.UnitWeight===""?'--':scope.row.UnitWeight}}</template>
            </el-table-column>
            <el-table-column prop="WeightFlnkID" label="状态" align="center" width="80">
                <template slot-scope="scope">{{scope.row.WeightFlnkID===""?'未校称':'已校称'}}</template>
            </el-table-column>
            <el-table-column prop="WeightFlnkID" label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-link type="primary" @click="gotoWeight(scope.row)">校称</el-link>
                </template>
            </el-table-column>
            
            </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Mixin from '@/components/mixin' // 混入
import {getCriminalInfo, getCuttingFabricInfo, getTailoringTaskInfo, GetCuttingTaskBedList,
SaveCuttingStepInfo, GetCuttingStepInfo, GetCuttingStepMatch, SaveCuttingStepMatchInStock,
GetCuttingStepInStock, SaveShopCuttingInStock, GetShopCuttingInStockDesignByStock,
GetShopCuttingSurplusDesignByBedID, SaveCuttingFabricOutStock, GetMaterielsWeightByFilter} from '@/api/tailoring' // 接口
import {getKCNumber, getFabricInStockDesign} from '@/api/instorage' // 接口
import Validity from '@/view/tool/validity'
import CalcTrans from '@/view/tool/calcTrans'

export default {
  name: 'process',
  data () {
    return {
      dialogtShow: false,
      tab: 1,
      cylinderNoShow: true,
      taskFlnkID: '',
      styleInfo: '',
      stockID: '',
      fabricInfo: '',
      bed: '',
      bedList: [],
      fabricLayers: '', // 面料层数
      cuttingInfo: [],
      matchInfo: {},
      taskList: [],
      menuModalText: '请刷卡',
      cardNum: '',
      swipeModalText: '扫二维码编号',
      swipeCard: '',
      swipeCardShow: false,
      barCode: '',
      barCodeShow: true,
      dialogShow: false,
      weight: '',
      selTableInfo: '',
      operaters: [],
      returnInfo: '',
      returnStock: '',
      returnShow: false,
      selLayer: '',
      validityShow: false,
      calcTransShow: false,
      clothWidth: '',
      weightMateriel: [],
      dialogShowW: false
    }
  },
  computed: {
    ...mapState({}),
    allLayers () {
      let vm = this
      let allLayers = 0
      vm.cuttingInfo.map((item) => {
        allLayers += item.FabricLayers
      })
      return allLayers
    }
  },
  components: {
    Validity,
    CalcTrans
  },
  mixins: [Mixin],
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    limitInput (value, el) {
      let val = (value && value.split('')) || []
      let reg1 = /\d/
      let reg2 = /\./
      // 第一个字符不能为小数点
      if (val[0] === '.') {
        this.clothWidth = ''
        return
      }
      // 过滤掉除数字和小数点外的字符
      val = val.filter((e) => reg1.test(e) || reg2.test(e))
      // 匹配小数点后只能有两位小数
      // 解释一下这个match正则规格
      // ^\d* 是指以数字开头，后面允许输入0到多位数字
      // (\.?) 是指只允许一个小数点
      // \d{0,2} 是指只允许0到2位小数
      this.clothWidth = val.join('').match(/^\d*(\.?\d{0,3})/g)[0] || null
    },
    // 刷卡回车事件
    cardNumEnter () {
      let vm = this
      let params = {
        Type: 1,
        ID: vm.cardNum
      }
      getCriminalInfo(params).then((response) => {
        if (response.data) {
          let person = response.data
          if (!vm.operaters.includes(person)) {
            vm.operaters.push(person)
          }
          vm.$message('刷卡成功')
          vm.cardNum = ''
          vm.dialogtShow = false
        }
      })
    },
    // 扫二维码回车事件
    swipeCardEnter () {
      let vm = this
      vm.stockID = vm.swipeCard // 存下来刚刚的二维码
      let params = new FormData()
      params.append('StockID', vm.swipeCard)
      getCuttingFabricInfo(params).then((response) => {
        if (response.data) {
          if (response.data.result) {
            vm.fabricInfo = response.data.data
          }
          vm.$message('刷卡成功')
          vm.swipeCard = ''
          vm.swipeCardShow = false
        }
      })
    },
    // ========================step1=========================================
    changeCylinderNoShow () {
      let vm = this
      vm.cylinderNoShow = false
      vm.$nextTick(() => {
        vm.$refs.cylinderNoInput.focus()
      })
    },
    cylinderNoEnter () {
      let vm = this
      vm.cylinderNoShow = true
    },
    // 任务单-根据标识读取任务单信息
    async getTailoringTaskInfo () {
      let vm = this
      let params = new FormData()
      params.append('TaskFlnkID', vm.taskFlnkID)
      await getTailoringTaskInfo(params).then((response) => {
        if (response.data.result) {
          vm.styleInfo = response.data.data
        }
      })
    },
    // 任务单-所有完成或正在完成的床次列表
    async getCuttingTaskBedList () {
      let vm = this
      let params = new FormData()
      params.append('TaskFlnkID', vm.taskFlnkID)
      await GetCuttingTaskBedList(params).then((response) => {
        if (response.data.result) {
          vm.bedList = response.data.data
        }
      })
    },
    // 铺布完成
    changeCuttingNext () {
      let vm = this
      if (vm.cuttingInfo.length <= 0) {
        vm.$message('请先铺布')
      } else {
        vm.tab = 2
      }
    },
    // 任务单-保存当前床次裁床上每个隔层的数量
    saveCuttingStepInfo () {
      let vm = this
      if (!vm.fabricLayers) {
        vm.$message('请填写层数')
        return
      }
      if (!vm.fabricInfo.StockStr1) {
        vm.$message('请填写缸号')
        return
      }
      let params = {
        CutTaskFlnkID: vm.styleInfo.FlnkID,
        BedID: vm.bed,
        CylinderNo: vm.fabricInfo.StockStr1,
        FabricLayers: vm.fabricLayers,
        StockCode: vm.stockID,
        MSDetailFlnkID: vm.fabricInfo.MSDetailFlnkID,
        CreateName: vm.clothWidth + ''
      }
      SaveCuttingStepInfo(params).then((response) => {
        if (response.data.result) {
          vm.$message('保存成功')
          vm.getCuttingStepInfo()
        } else {
          vm.$message(response.data.error)
        }
      })
    },
    // 读取床次号
    getKCNumber () {
      let vm = this
      let params = {
        ShortName: 'CCBH'
      }
      getKCNumber(params).then((response) => {
        if (response.data) {
          vm.bed = response.data
          vm.getCuttingStepInfo()
        }
      })
    },
    handleLayer (item) {
      let vm = this
      vm.selLayer = item
      vm.stockID = item.StockCode // 存下来获取的二维码
      // 获取面料信息
      let params = new FormData()
      params.append('StockID', item.StockCode)
      getCuttingFabricInfo(params).then((response) => {
        if (response.data) {
          if (response.data.result) {
            vm.fabricInfo = response.data.data
          }
        }
      })
    },
    // 任务单-根据任务单FlnkID读取裁床的隔层数
    async getCuttingStepInfo () {
      let vm = this
      let params = new FormData()
      params.append('TaskFlnkID', vm.styleInfo.FlnkID)
      params.append('BedID', vm.bed)
      await GetCuttingStepInfo(params).then((response) => {
        if (response.data.result) {
          vm.cuttingInfo = response.data.data
        }
      })
    },
    // 选择床次
    changeBed (row) {
      let vm = this
      this.bed = row.BedID
      // 重新获取一下面料数据
      vm.getCuttingStepInfo()
      if (vm.tab === 2) {
        vm.getCuttingStepMatch()
      } else if (vm.tab === 3) {
        vm.getCuttingStepInStock()
      }
    },
    // ========================step2===============================
    // 任务单-读取当前任务单和床次下裁床套裁信息
    getCuttingStepMatch () {
      let vm = this
      let params = new FormData()
      params.append('TaskFlnkID', vm.styleInfo.FlnkID)
      params.append('BedID', vm.bed)
      params.append('StyleFlnkID', vm.styleInfo.StyleFlnkID)
      params.append('MaterielsDetailID', vm.fabricInfo.MSMainFlnkID)
      GetCuttingStepMatch(params).then((response) => {
        if (response.data.result) {
          vm.matchInfo = response.data.data
        }
      })
    },
    // 编辑套裁信息(入参为他的坐标系)
    changeInput (x, y) {
      let vm = this
      vm.matchInfo.Header.map((item, index) => {
        vm.matchInfo.Body.map((i, k) => {
          if (index === x && k === y) {
            i.MatchCount[index] = Number(event.target.value)
          }
        })
      })

      if (event.target.value > 0) {
        vm.$(event.target).addClass('active')
      } else if (vm.$(event.target).value === 0) {
        vm.$(event.target).removeClass('active')
      }
    },
    // 任务单-保存当前床次裁床套裁信息和各个部位入库列表（暂存）
    saveCuttingStepMatchInStock () {
      let vm = this

      if (vm.cuttingInfo.length === 0) {
        vm.$message('请输入隔层信息')
        vm.tab = 1
        return
      }

      let matchList = []
      if (vm.matchInfo.Header && vm.matchInfo.Body) {
        vm.matchInfo.Header.map((item, index) => {
          vm.matchInfo.Body.map((i, k) => {
            if (i.MatchCount[index] > 0) {
              let _obj = {
                ColorConfigID: i.StyleColorID,
                ColorConfigName: i.StyleColorName,
                SpecConfigID: item.StyleSpecID,
                SpecConfigName: item.StyleSpecName,
                MatchCount: i.MatchCount[index]
              }
              matchList.push(_obj)
            }
          })
        })
      }

      if (matchList.length === 0) {
        vm.$message('请输入套裁信息')
        return
      }
      let params = {
        CutTaskFlnkID: vm.styleInfo.FlnkID,
        BedID: vm.bed,
        StyleFlnkID: vm.styleInfo.StyleFlnkID,
        // MaterielsFlnkID: vm.fabricInfo.MSMainFlnkID,
        // BomColor: vm.fabricInfo.ColorConfigCode,
        MatchList: matchList
        // StockID: vm.fabricInfo.StockID,
      }
      SaveCuttingStepMatchInStock(params).then((response) => {
        if (response.data.result) {
          vm.$message(response.data.error)
          vm.tab = 3
        } else {
          vm.$message(response.data.error)
        }
      })
    },
    goCalcTrans () {
      this.calcTransShow = true
    },
    gotoWeight (item) {
      let vm = this
      vm.fabricInfo.MaterielTypeCode = 'C'
      vm.fabricInfo.MSDetailFlnkID = item.FlnkID
      vm.validityShow = true
      vm.dialogShowW = false
    },
    goValidity () {
      let vm = this
      vm.fabricInfo.MaterielTypeCode = 'C'
      // 判断裁片部位是一个还是多个  一个直接跳  多个弹出判断页面
      var arr = vm.selTableInfo.MSCuttingFlnkIDs.split(',')
      if (arr.length > 1) {
          // 根据物料明细编号查询物料信息
        let params = new FormData()
        params.append('SearchValue', vm.selTableInfo.MSCuttingFlnkIDs)
        GetMaterielsWeightByFilter(params).then((response) => {
          if (response.data.result) {
            vm.weightMateriel = response.data.data
            vm.dialogShowW = true
            vm.dialogShow = false
          }
        })
      } else {
        vm.fabricInfo.MSDetailFlnkID = vm.selTableInfo.MSCuttingFlnkIDs.toLowerCase()
        this.validityShow = true
      }
    //   this.$router.replace({path: '/tool/calc', query: {type: this.type, materiel: this.materiel}})// 不保存的方式记录一下路由
    //   this.$router.push({path: '/tool/validity', query: {type: this.type, materiel: this.materiel}})
    },
    // ========================step3===============================
    // 任务单-读取当前任务单和床次下的入库信息（暂存）
    async getCuttingStepInStock () {
      let vm = this
      let params = new FormData()
      params.append('TaskFlnkID', vm.styleInfo.FlnkID)
      params.append('BedID', vm.bed)
      await GetCuttingStepInStock(params).then((response) => {
        if (response.data.result) {
          vm.taskList = response.data.data
        }
      })
    },
    changeBarCodeShow () {
      let vm = this
      vm.barCodeShow = false
      vm.$nextTick(() => {
        vm.$refs.barCodeInput.focus()
      })
    },
    // 任务单-裁剪房裁片入库
    saveShopCuttingInStock () {
      let vm = this
      if (!vm.weight) {
        vm.$message('请称重')
        vm.dialogShow = true
        return
      }
      let params = new FormData()
      params.append('StepInFlnkID', vm.selTableInfo.FlnkID)
      params.append(
        'WarehouseFlnkID',
        vm.warehouseFormat('C')// vm.fabricInfo.MaterielTypeCode
      )
      params.append('PartCuttingWeight', vm.weight)
      params.append('BarCode', vm.barCode)
      params.append('OperFlnkID', vm.getLocalStorage('UserFlnkID'))
      params.append('FactoryType', '100002')
      params.append('CuttingFlnkID', '00000000-0000-0000-0000-000000000000')
      params.append('BedID', '00000000-0000-0000-0000-000000000000')
      SaveShopCuttingInStock(params).then((response) => {
        if (response.data.result) {
          vm.$message(response.data.error)
          // 刷新一下列表
          vm.getCuttingStepInStock()
          setTimeout(() => {
            vm.getShopCuttingInStockDesignByStock(response.data, 0)
          }, 1000)
        } else {
          vm.$message(response.data.error)
        }
        vm.dialogShow = false
      })
    },
    // 入库
    showDialog (item) {
      let vm = this
      vm.weight = ''
      vm.barCode = ''
      vm.selTableInfo = item
      vm.dialogShow = true
    },
    // 任务单-读取自裁片标签信息
    getShopCuttingInStockDesignByStock (item, type) {
      let vm = this
      let params = new FormData()
      var cuttingTypeName = ''
      if (type === 1) {
        cuttingTypeName = item.CuttingTypeName
      } else {
          // 根据StockID查询出对用的裁片类型
        var obj = vm.taskList.filter(p => p.StockID === item.StockID)
        if (obj !== null && obj !== undefined && obj.length > 0) {
          cuttingTypeName = obj[0].CuttingTypeName
        }
      }
      params.append('StockID', item.StockID)
      if (cuttingTypeName === '自裁裁片') {
        GetShopCuttingInStockDesignByStock(params).then((response) => {
          if (response.data.result) {
            if (vm.isAndroid()) {
              window.android.print('CZ', JSON.stringify(response.data.data))
            } else {
              vm.$message(JSON.stringify(response.data.data))
            }
          }
        })
      } else {
        getFabricInStockDesign(params).then((response) => {
          if (response.data.result) {
            var info = []
            info.push(response.data.data)
            if (vm.isAndroid()) {
              window.android.print('CW', JSON.stringify(info))
            } else {
              vm.$message(JSON.stringify(info))
            }
          }
        })
      }
    },
    // 任务单-根据床号读取余料标签信息（面料信息）
    printLeftMaterial () {
      let vm = this
      let params = new FormData()
      params.append('BedID', vm.bed)
      GetShopCuttingSurplusDesignByBedID(params).then((response) => {
        if (response.data.result) {
          if (vm.isAndroid()) {
            window.android.print('L', JSON.stringify(response.data.data))
          } else {
            vm.$message(JSON.stringify(response.data.data))
          }
            // console.log(JSON.stringify(response.data.data));
        }
      })
    },
    // ========================退库===============================
    // 扫二维码回车事件
    returnEnter () {
      let vm = this
      // 任务单-退库根据扫二维码读取面料信息
      let params = new FormData()
      params.append('StockID', vm.returnStock)
      getCuttingFabricInfo(params).then((response) => {
        if (response.data.result) {
          vm.returnInfo = response.data.data
          vm.returnShow = false
        }
      })
    },
    // 任务单-裁片车间生产退料
    returnStockFun () {
      let vm = this
      let params = new FormData()
      params.append('DesignID', vm.stockID)
      params.append('OrgID', vm.getLocalStorage('OrgID'))
      params.append(
        'ProductLineFlnkID',
        vm.getLocalStorage('ProductLineFlnkID')
      )
      SaveCuttingFabricOutStock(params).then((response) => {
        if (response.data.result) {
          vm.$message('退料成功')
        } else {
          vm.$message(response.data.error)
        }
      })
    }
  },
  watch: {
    tab (newVal, oldVal) {
      let vm = this
      if (newVal === 2) {
        vm.getCuttingStepMatch()
      } else if (newVal === 3) {
        vm.getCuttingStepInStock()
      } else if (newVal === 4) {
        vm.returnShow = true
      }
    },
    dialogShow (newVal, oldVal) {
      let vm = this
      if (newVal === true) {
        vm.$nextTick(() => {
          vm.$refs.weightInput.focus()
        })
      }
    },
    dialogtShow (newVal, oldVal) {
      let vm = this
      if (newVal === true) {
        vm.$nextTick(() => {
          vm.$refs.cardNum.focus()
        })
      }
    },
    swipeCardShow (newVal, oldVal) {
      let vm = this
      if (newVal === true) {
        vm.$nextTick(() => {
          vm.$refs.swipeCard.focus()
        })
      }
    },
    returnShow (newVal, oldVal) {
      let vm = this
      if (newVal === true) {
        vm.$nextTick(() => {
          vm.$refs.returnStock.focus()
        })
      }
    }
  },
  async mounted () {
    let vm = this
    vm.tab = vm.$route.query.tab || 1
    vm.taskFlnkID = vm.$route.query.taskFlnkID
    await vm.getCuttingTaskBedList()
    await vm.getTailoringTaskInfo()
    if (vm.styleInfo.Status === 164001 || vm.styleInfo.Status === 164003) {
      vm.bed = vm.bedList[0].BedID
      await vm.getCuttingStepInfo()
      await vm.getCuttingStepInStock()
      vm.selLayer = vm.cuttingInfo[0]
      vm.handleLayer(vm.selLayer)
    } else {
      vm.getKCNumber()
      vm.swipeCardShow = true
    }
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "~@/css/tailoring/process.scss";
</style>
